<template>
    <treeselect
            :name="props.item.prop"
            :dir="props.item.dir ? props.item.dir  : 'ltr'"
            :multiple="props.item.multiple"
            :clearable="props.item.clearable ? props.item.clearable : true"
            :searchable="props.item.searchable ? props.item.searchable  : true"
            :disabled="props.item.disabled ? props.item.disabled : false"
            :open-on-click="props.item.events && props.item.events.openOnClick ? props.item.events.openOnClick  : null "
            :open-on-focus="props.item.events && props.item.events.openOnFocus ? props.item.events.openOnFocus : null"
            :clear-on-select="props.item.events && props.item.events.clearOnSelect ? props.item.events.clearOnSelect : null "
            :close-on-select="props.item.events && props.item.events.closeOnSelect ? props.item.events.closeOnSelect : null  "
            :always-open="props.item.alwaysOpen ? props.item.alwaysOpen : false"
            :default-expand-level="props.item.defaultExpandLevel ? props.item.defaultExpandLevel : 1"
            :append-to-body="props.item.events && props.item.events.appendToBody ? props.item.events.appendToBody : null  "
            :options="props.item.options ? props.item.options : options"
            :placeholder="props.item.placeholder ? props.item.placeholder : ''"
            :limit="props.item.limit ? props.item.limit : 3"
            :max-height="props.item.maxHeight ? props.item.maxHeight : 200"
            :normalizer="props.item.normalizer ? props.item.normalizer :null"
            v-model="props.form[props.item.prop]"
    />
</template>
<script setup>
// import the component
import Treeselect from 'vue3-treeselect'
// import the styles
import 'vue3-treeselect/dist/vue3-treeselect.css'

const props = defineProps({
    item :{
            required:true,
            type:Object,
        },
        form:{
            required:true,
            type:Object,
        }
})
let options=reactive([])

getOptions()
function getOptions(){
    var url = props.item.url;
    var param = props.item.params ;
    if(!url){return null; }
    this.$axios
        .post(url,param)
        .then(res => {
            if(res.status == 200 && res.data.code == 1){
                options = res.data.result;
                console.log(options);
            }else{
                this.$message({
                    type:"error",
                    message:'数据查询失败，请稍后重试！！！'
                });
            }
        });
}  
watch(props.item, (value) => {
  if (value.url) {
    getOptions()
  } else {
    options = value.options
  }
})
    
</script>
<style>

</style>












